<template>
  <div>
    <el-dialog :title="form?'快捷登录':'立即注册'" :visible="showDialog" style="width:55%;margin-left:350px" @close="closeFn">
      <!-- 登录 -->
      <el-form v-if="form"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm" 
      >
        <el-form-item label="账号" prop="identifier">
          <el-input
            v-model="ruleForm.identifier"
            placeholder="请输入账号" style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="请输入密码" style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item>
           <el-checkbox v-model="checked">7天内免登录</el-checkbox>
        </el-form-item>
        <el-row type="flex" justify="center">
        <el-button style="width:40%;margin-bottom:30px;background-color:#678574;color:#fff;font-size:16px" @click.native.prevent="handleLogin">登 录</el-button>
      </el-row>
      <el-link class="register" style="color:#678574;" @click.prevent="toRegister">
        没有账号？去注册
      </el-link>
      <el-link style="color:#678574;font-size:12px;margin-top:10px"><span style="color:#aaa;">登录即代表同意</span>《老六隐私政策》<span style="color:#aaa;">及</span>《老六用户使用协议》</el-link>
      </el-form>

    <!-- 注册 -->
    <el-form v-else
        :model="registerForm"
        :rules="rules"
        ref="registerForm"
        label-width="100px"
        class="demo-ruleForm" 
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请设置用户名" style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱" style="width:80%"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请设置密码" style="width:80%"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
        <el-button style="width:40%;margin-bottom:30px;background-color:#678574;color:#fff;font-size:16px" @click.native.prevent="handleRegister">注 册</el-button>
      </el-row>
      <el-link class="register" style="color:#678574;" @click.prevent="toLogin">
        已有账号？去登录
      </el-link>
      <el-link style="color:#678574;font-size:12px;margin-top:10px"><span style="color:#aaa;">
        我已阅读并同意</span>《老六隐私政策》<span style="color:#aaa;">及</span>《老六用户使用协议》</el-link>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
import { register } from '@/api/user'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checked:false,
      // 控制显示隐藏的变量
      form: true,
      // 登陆表单对象
      ruleForm: {
        identifier: "admin",
        password: "adminadmin",
      },
      // 注册表单对象
      registerForm: {
        username: '',
        email: '',
        password: ''
      },
      rules: {
        identifier: [
          { required: true, message: "账户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur",
          },
        ],
         email: [
          { required: true, message: "邮箱不能为空！", trigger: "blur" },
          {
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "邮箱格式不正确！",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
      }
    };
  },
  methods: {
    closeFn() {
      // this.$refs.ruleForm.resetFields()
      // this.fileList = []
      this.$emit("update:showDialog", false);
    },
    // 注册按钮事件
    async handleRegister() {
      try {
        // 发送请求
        await register(this.registerForm)
        // 跳转到login表单
        this.form = true
        // 并且回填
        const { username, password } = this.registerForm
        this.ruleForm.identifier = username
        this.ruleForm.password = password
        // 再清空注册表单
        this.registerForm = {
          username: '',
          email: '',
          password: ''
        }
        this.$message({
          message: '注册成功，为您跳转到登陆页面',
          type: 'success'
        })
      } catch (error) {
        this.$message({
          message: '注册失败',
          type: 'error'
        })
      }
    },
    async handleLogin() {
      await this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // await this.$store.dispatch('user/getToken', this.loginForm)
          this.$router.push('/')
          this.$message({
            message: '登录成功',
            type: 'success'
          })
          this.closeFn()
        } else {
          this.$message({
            message: '登录失败',
            type: 'error'
          })
          return false
        }
      })
    },
    // 去注册按钮
    toRegister() {
      this.form = false
    },
    toLogin() {
      this.form = true
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
        height: 55vh;
        overflow: auto;
    }
</style>